<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.8.0">
    

    

    



    <meta charset="utf-8">
    
    
    
    
    <title>gulp-自动化构建工具gulp | lafen | lafen&#39;s personal blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="gulp">
    <meta name="description" content="前言前端构建工具 gulp 的学习，本文由网络文章以及教程资料整理 gulp 介绍在前后端分离的模式中， node 充当的是自动化构建工具 常见的自动化构建工具  grunt gulp webpack  而这篇主要记录的是 gulp ，没错，因为 gulp 相对来说，比较简单（菜鸡狗头保命） gulp 是一个基于流的自动化构建工具。他可以监听项目文件、读写文件，管理和执行任务（Task）。掌握 g">
<meta name="keywords" content="gulp">
<meta property="og:type" content="article">
<meta property="og:title" content="gulp-自动化构建工具gulp">
<meta property="og:url" content="https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/index.html">
<meta property="og:site_name" content="lafen">
<meta property="og:description" content="前言前端构建工具 gulp 的学习，本文由网络文章以及教程资料整理 gulp 介绍在前后端分离的模式中， node 充当的是自动化构建工具 常见的自动化构建工具  grunt gulp webpack  而这篇主要记录的是 gulp ，没错，因为 gulp 相对来说，比较简单（菜鸡狗头保命） gulp 是一个基于流的自动化构建工具。他可以监听项目文件、读写文件，管理和执行任务（Task）。掌握 g">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2019-12-21T05:19:04.925Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="gulp-自动化构建工具gulp">
<meta name="twitter:description" content="前言前端构建工具 gulp 的学习，本文由网络文章以及教程资料整理 gulp 介绍在前后端分离的模式中， node 充当的是自动化构建工具 常见的自动化构建工具  grunt gulp webpack  而这篇主要记录的是 gulp ，没错，因为 gulp 相对来说，比较简单（菜鸡狗头保命） gulp 是一个基于流的自动化构建工具。他可以监听项目文件、读写文件，管理和执行任务（Task）。掌握 g">
    
        <link rel="alternate" type="application/atom+xml" title="lafen" href="/atom.xml">
    
    <link rel="shortcut icon" href="/img/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide">
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/brand.jpg)">
      <div class="brand">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">lafen</h5>
          <a href="mailto:1031822863@qq.com" title="1031822863@qq.com" class="mail">1031822863@qq.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/">
                <i class="icon icon-lg icon-home"></i>
                home
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives">
                <i class="icon icon-lg icon-archives"></i>
                Archives
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags">
                <i class="icon icon-lg icon-tags"></i>
                Tags
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/categories">
                <i class="icon icon-lg icon-th-list"></i>
                Categories
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/zhongxiaotian" target="_blank">
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="http://www.weibo.com/" target="_blank">
                <i class="icon icon-lg icon-weibo"></i>
                Weibo
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://gitee.com/lafen" target="_blank">
                <i class="icon icon-lg icon-link"></i>
                Gitee
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">gulp-自动化构建工具gulp</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">gulp-自动化构建工具gulp</h1>
        <h5 class="subtitle">
            
                <time datetime="2019-12-21T05:17:50.000Z" itemprop="datePublished" class="page-time">
  2019-12-21
</time>


	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/gulp/">gulp</a></li></ul>

            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap post-toc-shrink" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#前言"><span class="post-toc-number">1.</span> <span class="post-toc-text">前言</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#gulp-介绍"><span class="post-toc-number">2.</span> <span class="post-toc-text">gulp 介绍</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#gulp-安装使用"><span class="post-toc-number">3.</span> <span class="post-toc-text">gulp 安装使用</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-全局安装-gulp"><span class="post-toc-number">3.1.</span> <span class="post-toc-text">1. 全局安装 gulp</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2-作为项目开发依赖（DevDependencies）安装"><span class="post-toc-number">3.2.</span> <span class="post-toc-text">2. 作为项目开发依赖（DevDependencies）安装</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3-gulpfile-js"><span class="post-toc-number">3.3.</span> <span class="post-toc-text">3. gulpfile.js</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#4-运行-gulp"><span class="post-toc-number">3.4.</span> <span class="post-toc-text">4. 运行 gulp</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#gulp-核心-api"><span class="post-toc-number">4.</span> <span class="post-toc-text">gulp 核心 api</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-task-taskName-taskFunction"><span class="post-toc-number">4.1.</span> <span class="post-toc-text">1. task([taskName], taskFunction)</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2-src-globs-options-和-dest-directory-options"><span class="post-toc-number">4.2.</span> <span class="post-toc-text">2. src(globs, [options]) 和 dest(directory, [options])</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3-series-…tasks"><span class="post-toc-number">4.3.</span> <span class="post-toc-text">3. series(…tasks)</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#4-watch-globs-options-task"><span class="post-toc-number">4.4.</span> <span class="post-toc-text">4. watch(globs, [options], [task])</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#gulp-常用插件"><span class="post-toc-number">5.</span> <span class="post-toc-text">gulp 常用插件</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#1-del-patterns-options"><span class="post-toc-number">5.1.</span> <span class="post-toc-text">1. del(patterns, [options])</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#2-gulp-sass-和-node-sass"><span class="post-toc-number">5.2.</span> <span class="post-toc-text">2. gulp-sass 和 node-sass</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#3-gulp-autoprefixer"><span class="post-toc-number">5.3.</span> <span class="post-toc-text">3. gulp-autoprefixer</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#4-gulp-sourcemaps"><span class="post-toc-number">5.4.</span> <span class="post-toc-text">4. gulp-sourcemaps</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#5-gulp-babel"><span class="post-toc-number">5.5.</span> <span class="post-toc-text">5. gulp-babel</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#6-gulp-file-include"><span class="post-toc-number">5.6.</span> <span class="post-toc-text">6. gulp-file-include</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#7-browser-sync"><span class="post-toc-number">5.7.</span> <span class="post-toc-text">7. browser-sync</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#8-gulp-uglify"><span class="post-toc-number">5.8.</span> <span class="post-toc-text">8. gulp-uglify</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#9-gulp-rev-和-gulp-rev-collector"><span class="post-toc-number">5.9.</span> <span class="post-toc-text">9. gulp-rev 和 gulp-rev-collector</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#开发环境下需要处理的任务"><span class="post-toc-number">6.</span> <span class="post-toc-text">开发环境下需要处理的任务</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#生产环境下需要处理的任务"><span class="post-toc-number">7.</span> <span class="post-toc-text">生产环境下需要处理的任务</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#开发环境相应配置"><span class="post-toc-number">8.</span> <span class="post-toc-text">开发环境相应配置</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#生产环境相应配置"><span class="post-toc-number">9.</span> <span class="post-toc-text">生产环境相应配置</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#参考"><span class="post-toc-number">10.</span> <span class="post-toc-text">参考</span></a></li></ol>
        </nav>
    </aside>


<article id="post-gulp-自动化构建工具gulp/gulp-自动化构建工具gulp" class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">gulp-自动化构建工具gulp</h1>
        <div class="post-meta">
            <time class="post-time" title="2019-12-21 13:17:50" datetime="2019-12-21T05:17:50.000Z" itemprop="datePublished">2019-12-21</time>

            
	<ul class="article-category-list"><li class="article-category-list-item"><a class="article-category-list-link" href="/categories/gulp/">gulp</a></li></ul>



            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style="display:none">
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>前端构建工具 <code>gulp</code> 的学习，本文由网络文章以及教程资料整理</p>
<h3 id="gulp-介绍"><a href="#gulp-介绍" class="headerlink" title="gulp 介绍"></a>gulp 介绍</h3><p>在前后端分离的模式中， <code>node</code> 充当的是<strong>自动化构建工具</strong></p>
<p>常见的自动化构建工具</p>
<ul>
<li>grunt</li>
<li>gulp</li>
<li>webpack</li>
</ul>
<p>而这篇主要记录的是 <code>gulp</code> ，没错，因为 <code>gulp</code> 相对来说，比较简单（菜鸡狗头保命）</p>
<p><a href="https://www.gulpjs.com.cn/" target="_blank" rel="noopener">gulp</a> 是一个基于流的自动化构建工具。他可以监听项目文件、读写文件，管理和执行任务（<code>Task</code>）。掌握 <code>gulp</code> 的几个关键 <code>API</code> 就可以完成你的大部分构建需求</p>
<ul>
<li><code>gulp.task</code> 注册一个任务</li>
<li><code>gulp.src</code> 以文件流的形式获取文件</li>
<li><code>gulp.dest</code> 保存文件到具体地址</li>
<li><code>gulp.run</code> 执行任务</li>
<li><code>gulp.series</code> 让任务按顺序执行</li>
<li><code>gulp.watch</code> 监控文件改动</li>
</ul>
<p><code>gulp</code> 最大的特点是引入<strong>流</strong>的概念，同时提供一系列常用的插件去处理流，流可以在插件之间传递</p>
<p><code>gulp</code> 的 <code>API</code> 简单，使用起来非常容易，但同时对于复杂应用同样存在缺点，就是需要写非常多的复杂配置。接下来就看看如何使用  <code>gulp</code> 的这几个 <code>API</code>，还有哪些插件可以使用</p>
<h3 id="gulp-安装使用"><a href="#gulp-安装使用" class="headerlink" title="gulp 安装使用"></a>gulp 安装使用</h3><h4 id="1-全局安装-gulp"><a href="#1-全局安装-gulp" class="headerlink" title="1. 全局安装 gulp"></a>1. 全局安装 gulp</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g gulp</span><br></pre></td></tr></table></figure>
<h4 id="2-作为项目开发依赖（DevDependencies）安装"><a href="#2-作为项目开发依赖（DevDependencies）安装" class="headerlink" title="2. 作为项目开发依赖（DevDependencies）安装"></a>2. 作为项目开发依赖（DevDependencies）安装</h4><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -D gulp</span><br></pre></td></tr></table></figure>
<h4 id="3-gulpfile-js"><a href="#3-gulpfile-js" class="headerlink" title="3. gulpfile.js"></a>3. gulpfile.js</h4><p>在项目根目录文件夹下创建 <code>gulpfile.js</code> 文件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(gulp);</span><br><span class="line"><span class="comment">// 创建一个默认任务</span></span><br><span class="line">gulp.task(<span class="string">'default'</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 任务代码</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h4 id="4-运行-gulp"><a href="#4-运行-gulp" class="headerlink" title="4. 运行 gulp"></a>4. 运行 gulp</h4><p>项目根目录下 cmd 执行 gulp </p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp</span><br></pre></td></tr></table></figure>
<p>默认的名为 <code>default</code> 的任务（<code>task</code>） 将会被运行，想要单独运行特定的任务，可在定义任务 （<code>task</code>） 后，输入执行 <code>gulp &lt;task&gt; &lt;othertask&gt;</code></p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp task1 task2</span><br></pre></td></tr></table></figure>
<h3 id="gulp-核心-api"><a href="#gulp-核心-api" class="headerlink" title="gulp 核心 api"></a>gulp 核心 api</h3><h4 id="1-task-taskName-taskFunction"><a href="#1-task-taskName-taskFunction" class="headerlink" title="1. task([taskName], taskFunction)"></a>1. task([taskName], taskFunction)</h4><p>定义任务，gulp 的执行由一个个单独的任务组成的</p>
<ul>
<li><code>taskName</code> 任务名称</li>
<li><code>taskFunction</code> 任务具体的执行函数</li>
</ul>
<p>在 <code>gulpfile.js</code> 中</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"><span class="comment">// 定义名为 hello 的任务</span></span><br><span class="line">gulp.task(<span class="string">'hello'</span>, () =&gt; &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'hello gulp!'</span>)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>在 <code>cmd</code> 窗口中执行 <code>hello</code> 任务</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp hello</span><br></pre></td></tr></table></figure>
<blockquote>
<p>gulp -f gulpfile2.js hello 可运行指定的 gulp 文件和任务</p>
</blockquote>
<p><strong>注意</strong></p>
<p><code>gulp</code> 4.0版本 要求在任务内，返回一个 <code>promise</code>对象，需要对齐手动关闭，否则任务不会关闭，可通过以下方式将其关闭</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1 方式1</span></span><br><span class="line">gulp.task(<span class="string">"hello"</span>, done =&gt; &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"hello gulp!"</span>);</span><br><span class="line">  <span class="comment">//   任务执行完毕之后，需要手动调用done来结束任务</span></span><br><span class="line">  done();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2 方式2 返回一个promise对象</span></span><br><span class="line">gulp.task(<span class="string">"hello1"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">"hello gulp"</span>);</span><br><span class="line">    resolve();</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// 3 方式3 返回 gulp的strem流</span></span><br><span class="line">gulp.task(<span class="string">"copy"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    gulp</span><br><span class="line">      .src(<span class="string">"src/index.html"</span>)</span><br><span class="line">      .pipe(gulp.dest(<span class="string">"dist/"</span>))</span><br><span class="line">  );</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h4 id="2-src-globs-options-和-dest-directory-options"><a href="#2-src-globs-options-和-dest-directory-options" class="headerlink" title="2. src(globs, [options]) 和 dest(directory, [options])"></a>2. src(globs, [options]) 和 dest(directory, [options])</h4><p><code>src</code> 获取文件，以文件流的形式</p>
<ul>
<li><code>globs</code> 获取文件的正则写法</li>
<li><code>options</code> 配置信息，可选</li>
</ul>
<p><code>dest</code> 保存文件流到具体的地址上</p>
<ul>
<li><code>directory</code> 保存的目标地址</li>
<li><code>options</code> 配置信息，可选</li>
</ul>
<p>在 <code>gulpfile.js</code> 中编写任务</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="comment">// 编写一个拷贝任务</span></span><br><span class="line">gulp.task(<span class="string">"copy"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="comment">// 1  获取根目录下的src下的一个文件index.html</span></span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    gulp</span><br><span class="line">      .src(<span class="string">"src/index.html"</span>)</span><br><span class="line">      <span class="comment">// 2.1 pipe是gulp内置的管道处理函数，固定写法 可以处理gulp.src内的文件流</span></span><br><span class="line">      <span class="comment">// 2.2 dest 复制到dist目录下</span></span><br><span class="line">      .pipe(gulp.dest(<span class="string">"dist/"</span>))</span><br><span class="line">  );</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<p>以上任务会获取 <code>src</code> 文件夹下的 <code>index.html</code> 文件，将其通过 <code>pipe</code> 复制到 <code>dist/</code> 文件夹下</p>
<ul>
<li><code>pipe</code> 是 <code>gulp</code> 内置的管道处理函数，可处理 <code>gulp.src</code> 内的文件流</li>
<li><code>return</code> 一个文件流表示结束该任务</li>
</ul>
<p>在 <code>cmd</code> 中执行 <code>copy</code> 任务</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp copy</span><br></pre></td></tr></table></figure>
<h4 id="3-series-…tasks"><a href="#3-series-…tasks" class="headerlink" title="3. series(…tasks)"></a>3. series(…tasks)</h4><p><code>gulp</code> 任务不会按照顺序执行的，需要使用 <code>series</code> 来指定执行顺序</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1  定义任务 </span></span><br><span class="line">gulp.task(<span class="string">"hello1"</span>, done =&gt; &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"hello1"</span>);</span><br><span class="line">  done();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2 定义任务 </span></span><br><span class="line">gulp.task(<span class="string">"hello2"</span>, done=&gt; &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"hello2"</span>);</span><br><span class="line">  done();</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3  按顺序执行任务 </span></span><br><span class="line">gulp.task(<span class="string">"sequence"</span>,gulp.series([</span><br><span class="line">     <span class="string">'hello1'</span>,</span><br><span class="line">     <span class="string">'hello2'</span>,</span><br><span class="line">]))</span><br></pre></td></tr></table></figure>
<h4 id="4-watch-globs-options-task"><a href="#4-watch-globs-options-task" class="headerlink" title="4. watch(globs, [options], [task])"></a>4. watch(globs, [options], [task])</h4><p>监控文件的改动，进而触发对应的任务，如 sass 文件改动，触发自动编译</p>
<ul>
<li><code>globs</code> 获取文件的正则写法</li>
<li><code>options</code> 配置信息，可选</li>
<li><code>task</code> 文件发生改动后执行的任务，可选</li>
</ul>
<p><strong>watcher.on(eventName, eventHandler)</strong></p>
<p><code>watcher</code> 指的是 <code>watch</code> 函数的返回值，它可以继续绑定对应的事件，进而触发后续的逻辑</p>
<p><code>eventName</code> 支持的事件名称</p>
<ul>
<li><code>add</code></li>
<li><code>addDir</code></li>
<li><code>change</code></li>
<li><code>unlink</code></li>
<li><code>unlinkDir</code></li>
<li><code>ready</code></li>
<li><code>error</code></li>
<li><code>all</code></li>
</ul>
<p><code>eventHandler</code> 事件的执行函数</p>
<h3 id="gulp-常用插件"><a href="#gulp-常用插件" class="headerlink" title="gulp 常用插件"></a>gulp 常用插件</h3><p><a href="https://gulpjs.com/plugins/" target="_blank" rel="noopener">gulp插件网</a></p>
<h4 id="1-del-patterns-options"><a href="#1-del-patterns-options" class="headerlink" title="1. del(patterns, [options])"></a>1. <a href="https://www.npmjs.com/package/del" target="_blank" rel="noopener">del(patterns, [options])</a></h4><ul>
<li><code>patterns</code> 使用正则或数组来匹配要删除的源文件</li>
<li><code>options</code> 配置信息，可选</li>
</ul>
<ol>
<li>安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install del -D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写删除任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="keyword">const</span> del = <span class="built_in">require</span>(<span class="string">"del"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 编写删除任务 任务名为del</span></span><br><span class="line">gulp.task(<span class="string">"del"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="comment">// 删除目录下名字为dist的文件夹</span></span><br><span class="line">  <span class="keyword">return</span> del([<span class="string">"dist"</span>]);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>执行任务</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp del</span><br></pre></td></tr></table></figure>
<h4 id="2-gulp-sass-和-node-sass"><a href="#2-gulp-sass-和-node-sass" class="headerlink" title="2. gulp-sass 和 node-sass"></a>2. <a href="https://www.npmjs.com/package/gulp-sass" target="_blank" rel="noopener">gulp-sass</a> 和 <a href="https://www.npmjs.com/package/node-sass" target="_blank" rel="noopener">node-sass</a></h4><p><code>gulp-sass</code> 和 <code>node-sass</code> 是用来将 <code>sass</code> 文件编译成 <code>css</code> 文件</p>
<ol>
<li>安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install node-sass gulp-sass -D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="keyword">const</span> sass = <span class="built_in">require</span>(<span class="string">"gulp-sass"</span>);</span><br><span class="line"><span class="comment">// 将 node-sass导出为 sass的编译器 compiler 使用sass就可以直接编译css</span></span><br><span class="line">sass.compiler = <span class="built_in">require</span>(<span class="string">"node-sass"</span>);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"css"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .src(<span class="string">"src/css/*.scss"</span>)</span><br><span class="line">    <span class="comment">// 执行编译</span></span><br><span class="line">    .pipe(sass())</span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/css/"</span>));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>执行</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp css</span><br></pre></td></tr></table></figure>
<h4 id="3-gulp-autoprefixer"><a href="#3-gulp-autoprefixer" class="headerlink" title="3. gulp-autoprefixer"></a>3. <a href="https://www.npmjs.com/package/gulp-autoprefixer" target="_blank" rel="noopener">gulp-autoprefixer</a></h4><p>自动添加浏览器前缀</p>
<ol>
<li>安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i gulp-autoprefixer -D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="keyword">const</span> sass = <span class="built_in">require</span>(<span class="string">"gulp-sass"</span>);</span><br><span class="line">sass.compiler = <span class="built_in">require</span>(<span class="string">"node-sass"</span>);</span><br><span class="line"><span class="comment">// 1 引入自动添加浏览器前缀的文件</span></span><br><span class="line"><span class="keyword">const</span> autoprefixer = <span class="built_in">require</span>(<span class="string">"gulp-autoprefixer"</span>);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"css"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .src(<span class="string">"src/css/*.scss"</span>)</span><br><span class="line">    .pipe(sass())</span><br><span class="line">    .pipe(</span><br><span class="line">      <span class="comment">// 2 添加最新的各大主流浏览器的两个版本的兼容性前缀</span></span><br><span class="line">      autoprefixer(&#123;</span><br><span class="line">        browsers: [<span class="string">"last 2 versions"</span>]</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/css/"</span>));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>执行任务</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp css</span><br></pre></td></tr></table></figure>
<h4 id="4-gulp-sourcemaps"><a href="#4-gulp-sourcemaps" class="headerlink" title="4. gulp-sourcemaps"></a>4. <a href="https://www.npmjs.com/package/gulp-sourcemaps" target="_blank" rel="noopener">gulp-sourcemaps</a></h4><p>提供编译前的 <code>sass</code> 文件到编译后的 <code>css</code> 文件的映射，生成 <code>map</code> 文件。</p>
<ol>
<li>安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i gulp-sourcemaps -D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="keyword">const</span> sass = <span class="built_in">require</span>(<span class="string">"gulp-sass"</span>);</span><br><span class="line">sass.compiler = <span class="built_in">require</span>(<span class="string">"node-sass"</span>);</span><br><span class="line"><span class="keyword">const</span> autoprefixer = <span class="built_in">require</span>(<span class="string">"gulp-autoprefixer"</span>);</span><br><span class="line"><span class="comment">// 1 引入包 </span></span><br><span class="line"><span class="keyword">const</span> sourcemaps = <span class="built_in">require</span>(<span class="string">"gulp-sourcemaps"</span>);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"css"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .src(<span class="string">"src/css/*.scss"</span>)</span><br><span class="line">    <span class="comment">// 2 获取到源文件后先记录以下</span></span><br><span class="line">    .pipe(sourcemaps.init())</span><br><span class="line">    <span class="comment">// 3 编译sass文件</span></span><br><span class="line">    .pipe(sass())</span><br><span class="line">    <span class="comment">// 4 添加兼容性前缀</span></span><br><span class="line">    .pipe(</span><br><span class="line">      autoprefixer(&#123;</span><br><span class="line">        browsers: [<span class="string">"last 2 versions"</span>]</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    <span class="comment">// 5 在css文件夹内生成map文件</span></span><br><span class="line">    .pipe(sourcemaps.write(<span class="string">"."</span>))</span><br><span class="line">    <span class="comment">// 6 将map文件和sass文件一起放入到对应的目录下</span></span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/css/"</span>));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>执行任务</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp css</span><br></pre></td></tr></table></figure>
<h4 id="5-gulp-babel"><a href="#5-gulp-babel" class="headerlink" title="5. gulp-babel"></a>5. <a href="https://www.npmjs.com/package/gulp-babel" target="_blank" rel="noopener">gulp-babel</a></h4><p><code>babel</code> 是一个专门处理 <code>js</code> 编译的库，如将 <code>es6</code> 编译成 <code>es5</code> 等</p>
<ol>
<li>安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i gulp-babel @babel/core @babel/preset-env -D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="keyword">const</span> sourcemaps = <span class="built_in">require</span>(<span class="string">"gulp-sourcemaps"</span>);</span><br><span class="line"><span class="comment">// 1 导入babel包</span></span><br><span class="line"><span class="keyword">const</span> babel = <span class="built_in">require</span>(<span class="string">"gulp-babel"</span>);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"js"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .src(<span class="string">"src/js/*.js"</span>)</span><br><span class="line">    <span class="comment">// 2 记录编译前的 es6的js</span></span><br><span class="line">    .pipe(sourcemaps.init())</span><br><span class="line">    <span class="comment">// 3 使用babel进行编译</span></span><br><span class="line">    .pipe(babel())</span><br><span class="line">    <span class="comment">// 4 js 生成js的map文件</span></span><br><span class="line">    .pipe(sourcemaps.write(<span class="string">"."</span>))</span><br><span class="line">    <span class="comment">// 5 存放到对应的地址</span></span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/js/"</span>));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>执行任务</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp js</span><br></pre></td></tr></table></figure>
<p>如果需要将 <code>es7</code> 或者 <code>es8</code> 编译为 <code>es6</code> 或者 <code>es5</code> 呢</p>
<p>在根目录下新建文件 <code>.babelrc</code> 对齐进行配置</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="string">"presets"</span>: [</span><br><span class="line">    [<span class="string">"@babel/preset-env"</span>, &#123;</span><br><span class="line">      <span class="string">"targets"</span>: &#123;</span><br><span class="line">        <span class="string">"browsers"</span>: [<span class="string">"last 2 years"</span>]</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;]</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><code>presets</code> 为预设的意思，它的值可以进行扩展配置，<code>&quot;@babel/preset-env&quot;</code> 是一个模块，里面默认包含了 将 <code>es6 =&gt; es5</code> 的设定，后期需要增加不同的版本的编译时，只要拓展该字段即可。</p>
<p>以上用法为<code>babel</code> 最常见的使用方式</p>
<h4 id="6-gulp-file-include"><a href="#6-gulp-file-include" class="headerlink" title="6. gulp-file-include"></a>6. <a href="https://www.npmjs.com/package/gulp-file-include" target="_blank" rel="noopener">gulp-file-include</a></h4><p>提供了文件合并的功能，可以理解为 类似 <code>gulp</code> 中的渲染模板插件，可以实现前端标签的组件化，如 <code>header.html</code> 组件，<code>nav.html</code> 组件等</p>
<ol>
<li>安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install gulp-file-include -D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="comment">// 1 导入包</span></span><br><span class="line"><span class="keyword">const</span> fileInclude = <span class="built_in">require</span>(<span class="string">"gulp-file-include"</span>);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"html"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">  <span class="comment">// 2 获取页面文件</span></span><br><span class="line">    .src(<span class="string">"src/index.html"</span>)</span><br><span class="line">    .pipe(</span><br><span class="line">      <span class="comment">// 3  加载模版文件</span></span><br><span class="line">      fileInclude(&#123;</span><br><span class="line">        <span class="comment">// 3.1 模版语法的识别符号</span></span><br><span class="line">        prefix: <span class="string">"@@"</span>,</span><br><span class="line">        <span class="comment">// 3.2 定义组件路径</span></span><br><span class="line">        basepath: <span class="string">"src/components/"</span>,</span><br><span class="line">        <span class="comment">// 3.3 context为关键字，内部的变量是组件内部可以使用的变量</span></span><br><span class="line">        context: &#123;</span><br><span class="line">          <span class="comment">// 3.4 定义整个项目的变量 名为 title 值为 "我们的页面"</span></span><br><span class="line">          title: <span class="string">"我们的页面"</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    <span class="comment">// 4 合并成功后，将html文件放置到dist文件夹下</span></span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/"</span>));</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>执行任务</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp html</span><br></pre></td></tr></table></figure>
<p><strong>组件 <code>header.html</code></strong></p>
<p>在 <code>src/components/</code> 内，新增组件文件 名为 header.html,输入内容</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>公共的头部<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>gulpflie.js文件的html任务 中定义的变量 @@page<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">h2</span>&gt;</span>index.html文件中传入的变量名 @@title<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><strong>页面 <code>index.html</code></strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>Document<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    @@include("header.html",&#123;"page":"index"&#125;)</span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="7-browser-sync"><a href="#7-browser-sync" class="headerlink" title="7. browser-sync"></a>7. <a href="https://browsersync.io/" target="_blank" rel="noopener">browser-sync</a></h4><p>实现编辑文件时，浏览器自动刷新，提高编码效率</p>
<ol>
<li>安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install browser-sync -D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="keyword">const</span> fileInclude = <span class="built_in">require</span>(<span class="string">"gulp-file-include"</span>);</span><br><span class="line"><span class="comment">// 1 引入文件</span></span><br><span class="line"><span class="keyword">const</span> browserSync = <span class="built_in">require</span>(<span class="string">"browser-sync"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2 编写编译html的任务</span></span><br><span class="line">gulp.task(<span class="string">"html"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .src(<span class="string">"src/index.html"</span>)</span><br><span class="line">    .pipe(</span><br><span class="line">      fileInclude(&#123;</span><br><span class="line">        prefix: <span class="string">"@@"</span>,</span><br><span class="line">        basepath: <span class="string">"src/components/"</span>,</span><br><span class="line">        context: &#123;</span><br><span class="line">          baseSrc: <span class="string">"."</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/"</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3 开启服务器和动态更新的任务</span></span><br><span class="line">gulp.task(<span class="string">"serve"</span>, () =&gt; &#123;</span><br><span class="line">  browserSync(&#123;</span><br><span class="line">    <span class="comment">// 3.1 开启本地服务器</span></span><br><span class="line">    server: &#123;</span><br><span class="line">      <span class="comment">// 3.2 网站的路径</span></span><br><span class="line">      baseDir: <span class="string">"dist"</span>,</span><br><span class="line">      <span class="comment">// 3.3 端口</span></span><br><span class="line">      port: <span class="number">8080</span></span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="comment">// 3.4 关闭浏览器右上方的黑色的提示框</span></span><br><span class="line">    notify: <span class="literal">false</span></span><br><span class="line">  &#125;);</span><br><span class="line">  <span class="comment">// 4 使用watch开监控页面的变化 发生变化之后  先执行重新编译html任务，然后执行刷新浏览器页面任务reload</span></span><br><span class="line">  gulp.watch(<span class="string">"src/**/*.html"</span>, gulp.series([<span class="string">"html"</span>, <span class="string">"reload"</span>]));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 5 刷新页面</span></span><br><span class="line">gulp.task(<span class="string">"reload"</span>, done =&gt; &#123;</span><br><span class="line">  browserSync.reload();</span><br><span class="line">  done();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>执行任务</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp serve</span><br></pre></td></tr></table></figure>
<h4 id="8-gulp-uglify"><a href="#8-gulp-uglify" class="headerlink" title="8. gulp-uglify"></a>8. <a href="https://www.npmjs.com/package/gulp-uglify" target="_blank" rel="noopener">gulp-uglify</a></h4><p>网站发布上线了需要将 开发环境中的 <code>js</code>，丑化 ，变成 人眼不怎么容易看懂的版本，提高安全性。如去掉注释，修改变量名，函数名等等。</p>
<ol>
<li>安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install gulp-uglify -D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="keyword">const</span> del = <span class="built_in">require</span>(<span class="string">"del"</span>);</span><br><span class="line"><span class="keyword">const</span> uglify = <span class="built_in">require</span>(<span class="string">"gulp-uglify"</span>);</span><br><span class="line"><span class="comment">// 1 引入包</span></span><br><span class="line"><span class="keyword">const</span> babel = <span class="built_in">require</span>(<span class="string">"gulp-babel"</span>);</span><br><span class="line"><span class="comment">// 1 引入包</span></span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"js"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    gulp</span><br><span class="line">      .src(<span class="string">"src/js/*.js"</span>)</span><br><span class="line">      <span class="comment">// 2 先使用babel将 js 编译为 es5</span></span><br><span class="line">      .pipe(babel())</span><br><span class="line">      .pipe(</span><br><span class="line">        <span class="comment">// 3 执行函数</span></span><br><span class="line">        uglify(&#123;</span><br><span class="line">          <span class="comment">// 3.1 丑化的等级</span></span><br><span class="line">          mangle: &#123;</span><br><span class="line">            <span class="comment">// 3.1.1 最高级</span></span><br><span class="line">            toplevel: <span class="literal">true</span></span><br><span class="line">          &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">      )</span><br><span class="line">      .pipe(gulp.dest(<span class="string">"./dist/js/"</span>))</span><br><span class="line">  );</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>执行任务</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp js</span><br></pre></td></tr></table></figure>
<h4 id="9-gulp-rev-和-gulp-rev-collector"><a href="#9-gulp-rev-和-gulp-rev-collector" class="headerlink" title="9. gulp-rev 和 gulp-rev-collector"></a>9. <a href="https://www.npmjs.com/package/gulp-rev" target="_blank" rel="noopener">gulp-rev</a> 和 <a href="https://www.npmjs.com/package/gulp-rev-collector" target="_blank" rel="noopener">gulp-rev-collector</a></h4><p>一般的浏览器容易对前端的静态资源进行缓存，如 <code>index.js</code> <code>index.css</code>等。有时候 网站升级了，想让用户使用最新版本的<code>js</code>和<code>css</code>。 此时，可以在对应的静态资源上添加特定的字符，如 <code>index2233355.js</code> <code>index20190108233410.css</code>等。这个工作可以交由  <strong>gulp-rev</strong>和 <strong>gulp-rev-collector</strong> 完成</p>
<ul>
<li><strong>gulp-rev</strong> 负责 给静态资源添加唯一后缀，俗称指纹。</li>
<li><strong>gulp-rev-collector</strong> 负责将 html中的 引用路径(<code>index.css</code>) 改为(<code>index392938098094.css</code>)</li>
</ul>
<ol>
<li>安装</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install  gulp-rev gulp-rev-collector  -D</span><br></pre></td></tr></table></figure>
<ol start="2">
<li>编写任务</li>
</ol>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="keyword">const</span> babel = <span class="built_in">require</span>(<span class="string">"gulp-babel"</span>);</span><br><span class="line"><span class="keyword">const</span> sass = <span class="built_in">require</span>(<span class="string">"gulp-sass"</span>);</span><br><span class="line">sass.compiler = <span class="built_in">require</span>(<span class="string">"node-sass"</span>);</span><br><span class="line"><span class="comment">// 1 引入包</span></span><br><span class="line"><span class="keyword">const</span> rev = <span class="built_in">require</span>(<span class="string">"gulp-rev"</span>);</span><br><span class="line"><span class="comment">// 1 引入包</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> revCollector = <span class="built_in">require</span>(<span class="string">"gulp-rev-collector"</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2 处理sass</span></span><br><span class="line">gulp.task(<span class="string">"css"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    gulp</span><br><span class="line">      .src(<span class="string">"src/css/*.scss"</span>)</span><br><span class="line">      .pipe(sass())</span><br><span class="line">      <span class="comment">// 2.1 给css文件添加指纹</span></span><br><span class="line">      .pipe(rev())</span><br><span class="line">      <span class="comment">//  2.2 存放css</span></span><br><span class="line">      .pipe(gulp.dest(<span class="string">"./dist/css/"</span>))</span><br><span class="line">      <span class="comment">//  3 将 css文件和css指纹文件的映射关系写到文件中</span></span><br><span class="line">      .pipe(</span><br><span class="line">        rev.manifest(&#123;</span><br><span class="line">          path: <span class="string">"rev-css-mainfest.json"</span></span><br><span class="line">        &#125;)</span><br><span class="line">      )</span><br><span class="line">      <span class="comment">//  4 存入起来，给后面html修改引用使用</span></span><br><span class="line">      .pipe(gulp.dest(<span class="string">"./src/rev/"</span>))</span><br><span class="line">  );</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//  2 处理js</span></span><br><span class="line">gulp.task(<span class="string">"js"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    gulp</span><br><span class="line">      .src(<span class="string">"src/js/*.js"</span>)</span><br><span class="line">      .pipe(babel())</span><br><span class="line">      <span class="comment">//  2.1 给js文件添加指纹</span></span><br><span class="line">      .pipe(rev())</span><br><span class="line">      <span class="comment">//  2.2 存放js文件</span></span><br><span class="line">      .pipe(gulp.dest(<span class="string">"./dist/js/"</span>))</span><br><span class="line">      <span class="comment">//  3  将 js文件和js指纹文件的映射关系写到文件中</span></span><br><span class="line">      .pipe(</span><br><span class="line">        rev.manifest(&#123;</span><br><span class="line">          path: <span class="string">"rev-js-mainfest.json"</span></span><br><span class="line">        &#125;)</span><br><span class="line">      )</span><br><span class="line">      <span class="comment">//  4 存入起来，给后面html修改引用使用</span></span><br><span class="line">      .pipe(gulp.dest(<span class="string">"./src/rev/"</span>))</span><br><span class="line">  );</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3 处理html</span></span><br><span class="line">gulp.task(<span class="string">"html"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> (</span><br><span class="line">    gulp</span><br><span class="line">      <span class="comment">//  3.1 获取标签文件 和 指纹映射文件</span></span><br><span class="line">      .src([<span class="string">"src/index.html"</span>, <span class="string">"./src/rev/*.json"</span>])</span><br><span class="line">      <span class="comment">//  3.2 开始修改html中的文件引用</span></span><br><span class="line">      .pipe(revCollector())</span><br><span class="line">      <span class="comment">//   3.3 存放我们的页面文件</span></span><br><span class="line">      .pipe(gulp.dest(<span class="string">"dist/"</span>))</span><br><span class="line">  );</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4 按顺序执行</span></span><br><span class="line">gulp.task(<span class="string">"default"</span>, gulp.series([<span class="string">"css"</span>, <span class="string">"js"</span>, <span class="string">"html"</span>]));</span><br></pre></td></tr></table></figure>
<ol start="3">
<li>执行任务</li>
</ol>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">gulp</span><br></pre></td></tr></table></figure>
<h3 id="开发环境下需要处理的任务"><a href="#开发环境下需要处理的任务" class="headerlink" title="开发环境下需要处理的任务"></a>开发环境下需要处理的任务</h3><ol>
<li>编译 <code>sass</code> 文件</li>
<li>给 <code>css</code> 文件添加浏览器前缀</li>
<li>给 <code>css</code> 文件和 <code>js</code> 文件添加 <code>map</code> 文件映射</li>
<li>编译 <code>js</code> 文件</li>
<li>实现 <code>html</code> 标签组件</li>
<li>浏览器自动刷新</li>
</ol>
<h3 id="生产环境下需要处理的任务"><a href="#生产环境下需要处理的任务" class="headerlink" title="生产环境下需要处理的任务"></a>生产环境下需要处理的任务</h3><ol>
<li>编译 <code>sass</code> 文件</li>
<li>给 <code>css</code> 文件添加浏览器前缀</li>
<li>压缩和丑化 <code>css</code> 文件</li>
<li>编译 <code>js</code> 文件</li>
<li>压缩和丑化 <code>js</code> 文件</li>
<li>实现 <code>html</code> 标签组件</li>
<li>给资源文件添加指纹</li>
</ol>
<h3 id="开发环境相应配置"><a href="#开发环境相应配置" class="headerlink" title="开发环境相应配置"></a>开发环境相应配置</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> del = <span class="built_in">require</span>(<span class="string">"del"</span>);</span><br><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">"gulp"</span>);</span><br><span class="line"><span class="keyword">const</span> sass = <span class="built_in">require</span>(<span class="string">"gulp-sass"</span>);</span><br><span class="line">sass.compiler = <span class="built_in">require</span>(<span class="string">"node-sass"</span>);</span><br><span class="line"><span class="keyword">const</span> sourcemaps = <span class="built_in">require</span>(<span class="string">"gulp-sourcemaps"</span>);</span><br><span class="line"><span class="keyword">const</span> autoprefixer = <span class="built_in">require</span>(<span class="string">"gulp-autoprefixer"</span>);</span><br><span class="line"><span class="keyword">const</span> babel = <span class="built_in">require</span>(<span class="string">"gulp-babel"</span>);</span><br><span class="line"><span class="keyword">const</span> fileInclude = <span class="built_in">require</span>(<span class="string">"gulp-file-include"</span>);</span><br><span class="line"><span class="keyword">const</span> browserSync = <span class="built_in">require</span>(<span class="string">"browser-sync"</span>);</span><br><span class="line">gulp.task(<span class="string">"del"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> del([<span class="string">"dist"</span>]);</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(<span class="string">"css"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .src(<span class="string">"src/css/*.scss"</span>)</span><br><span class="line">    .pipe(sourcemaps.init())</span><br><span class="line">    .pipe(sass())</span><br><span class="line">    .pipe(</span><br><span class="line">      autoprefixer(&#123;</span><br><span class="line">        browsers: [<span class="string">"last 2 versions"</span>]</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    .pipe(sourcemaps.write(<span class="string">"."</span>))</span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/css/"</span>));</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(<span class="string">"js"</span>, () =&gt; &#123;</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .src(<span class="string">"src/js/*.js"</span>)</span><br><span class="line">    .pipe(sourcemaps.init())</span><br><span class="line">    .pipe(babel())</span><br><span class="line">    .pipe(sourcemaps.write(<span class="string">"."</span>))</span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/js/"</span>));</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(<span class="string">"copy"</span>, () =&gt; &#123;</span><br><span class="line">  gulp.src(<span class="string">"src/lib/**"</span>).pipe(gulp.dest(<span class="string">"dist/lib/"</span>));</span><br><span class="line">  <span class="keyword">return</span> gulp.src(<span class="string">"src/static/**"</span>).pipe(gulp.dest(<span class="string">"dist/static/"</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"html"</span>, () =&gt; &#123;</span><br><span class="line">  gulp</span><br><span class="line">    .src(<span class="string">"src/index.html"</span>)</span><br><span class="line">    .pipe(</span><br><span class="line">      fileInclude(&#123;</span><br><span class="line">        prefix: <span class="string">"@@"</span>,</span><br><span class="line">        basepath: <span class="string">"src/components/"</span>,</span><br><span class="line">        context: &#123;</span><br><span class="line">          baseSrc: <span class="string">"."</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/"</span>));</span><br><span class="line">  <span class="keyword">return</span> gulp</span><br><span class="line">    .src(<span class="string">"src/pages/*.html"</span>)</span><br><span class="line">    .pipe(</span><br><span class="line">      fileInclude(&#123;</span><br><span class="line">        prefix: <span class="string">"@@"</span>,</span><br><span class="line">        basepath: <span class="string">"src/components/"</span>,</span><br><span class="line">        context: &#123;</span><br><span class="line">          baseSrc: <span class="string">"."</span></span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br><span class="line">    )</span><br><span class="line">    .pipe(gulp.dest(<span class="string">"dist/pages/"</span>));</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(<span class="string">"serve"</span>, () =&gt; &#123;</span><br><span class="line">  browserSync(&#123;</span><br><span class="line">    server: &#123;</span><br><span class="line">      baseDir: <span class="string">"dist"</span>,</span><br><span class="line">      port: <span class="number">8080</span></span><br><span class="line">    &#125;,</span><br><span class="line">    notify: <span class="literal">false</span></span><br><span class="line">  &#125;);</span><br><span class="line">  gulp.watch(<span class="string">"src/css/*.scss"</span>, gulp.series([<span class="string">"css"</span>, <span class="string">"reload"</span>]));</span><br><span class="line">  gulp.watch(<span class="string">"src/**/*.html"</span>, gulp.series([<span class="string">"html"</span>, <span class="string">"reload"</span>]));</span><br><span class="line">  gulp.watch(<span class="string">"src/js/*.js"</span>, gulp.series([<span class="string">"js"</span>, <span class="string">"reload"</span>]));</span><br><span class="line">  gulp.watch([<span class="string">"src/lib/**"</span>, <span class="string">"src/static/**"</span>], gulp.series([<span class="string">"copy"</span>, <span class="string">"reload"</span>]));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"reload"</span>, done =&gt; &#123;</span><br><span class="line">  browserSync.reload();</span><br><span class="line">  done();</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(</span><br><span class="line">  <span class="string">"default"</span>,</span><br><span class="line">  gulp.series([<span class="string">"del"</span>, <span class="string">"css"</span>, <span class="string">"js"</span>, <span class="string">"copy"</span>, <span class="string">"html"</span>, <span class="string">"serve"</span>])</span><br><span class="line">);</span><br></pre></td></tr></table></figure>
<h3 id="生产环境相应配置"><a href="#生产环境相应配置" class="headerlink" title="生产环境相应配置"></a>生产环境相应配置</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> del = <span class="built_in">require</span>(<span class="string">'del'</span>);</span><br><span class="line"><span class="keyword">const</span> gulp = <span class="built_in">require</span>(<span class="string">'gulp'</span>);</span><br><span class="line"><span class="keyword">const</span> sass = <span class="built_in">require</span>(<span class="string">'gulp-sass'</span>);</span><br><span class="line">sass.compiler = <span class="built_in">require</span>(<span class="string">'node-sass'</span>);</span><br><span class="line"><span class="keyword">const</span> autoprefixer = <span class="built_in">require</span>(<span class="string">'gulp-autoprefixer'</span>);</span><br><span class="line"><span class="keyword">const</span> babel = <span class="built_in">require</span>(<span class="string">'gulp-babel'</span>);</span><br><span class="line"><span class="keyword">const</span> uglify = <span class="built_in">require</span>(<span class="string">'gulp-uglify'</span>);</span><br><span class="line"><span class="keyword">const</span> fileInclude = <span class="built_in">require</span>(<span class="string">"gulp-file-include"</span>);</span><br><span class="line"><span class="keyword">const</span> rev = <span class="built_in">require</span>(<span class="string">"gulp-rev"</span>);</span><br><span class="line"><span class="keyword">const</span> revCollector = <span class="built_in">require</span>(<span class="string">"gulp-rev-collector"</span>);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"del"</span>, () =&gt; &#123;</span><br><span class="line">     <span class="keyword">return</span> del([<span class="string">'dist'</span>]);</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(<span class="string">"css"</span>, () =&gt; &#123;</span><br><span class="line">     <span class="keyword">return</span> gulp.src(<span class="string">'src/css/*.scss'</span>)</span><br><span class="line">          .pipe(sass(&#123;</span><br><span class="line">               outputStyle: <span class="string">'compressed'</span></span><br><span class="line">          &#125;))</span><br><span class="line">          .pipe(autoprefixer(&#123;</span><br><span class="line">               browsers: [<span class="string">'last 2 versions'</span>]</span><br><span class="line">          &#125;))</span><br><span class="line">          .pipe(rev())</span><br><span class="line">          .pipe(gulp.dest(<span class="string">"./dist/css/"</span>))</span><br><span class="line">          .pipe(rev.manifest(&#123;</span><br><span class="line">            path: <span class="string">"rev-css-mainfest.json"</span></span><br><span class="line">          &#125;))</span><br><span class="line">          .pipe(gulp.dest(<span class="string">"./src/rev/"</span>));</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(<span class="string">'js'</span>, () =&gt; &#123;</span><br><span class="line">     <span class="keyword">return</span> gulp.src(<span class="string">'src/js/*.js'</span>)</span><br><span class="line">          .pipe(babel())</span><br><span class="line">          .pipe(uglify(</span><br><span class="line">               &#123; <span class="attr">mangle</span>: &#123;</span><br><span class="line">                    toplevel: <span class="literal">true</span></span><br><span class="line">                  &#125;&#125;</span><br><span class="line">          ))</span><br><span class="line">          .pipe(rev())</span><br><span class="line">          .pipe(gulp.dest(<span class="string">"./dist/js/"</span>))</span><br><span class="line">          .pipe(rev.manifest(&#123;</span><br><span class="line">            path: <span class="string">"rev-js-mainfest.json"</span></span><br><span class="line">          &#125;))</span><br><span class="line">          .pipe(gulp.dest(<span class="string">"./src/rev/"</span>));</span><br><span class="line">&#125;);</span><br><span class="line">gulp.task(<span class="string">"copy"</span>, () =&gt; &#123;</span><br><span class="line">     gulp.src(<span class="string">"src/lib/**"</span>)</span><br><span class="line">          .pipe(gulp.dest(<span class="string">"dist/lib/"</span>));</span><br><span class="line">     <span class="keyword">return</span> gulp.src(<span class="string">"src/static/**"</span>)</span><br><span class="line">          .pipe(gulp.dest(<span class="string">"dist/static/"</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"html"</span>, () =&gt; &#123;</span><br><span class="line">     gulp.src([<span class="string">'src/index.html'</span>,<span class="string">'./src/rev/*.json'</span>])</span><br><span class="line">          .pipe(fileInclude(&#123;</span><br><span class="line">               prefix: <span class="string">'@@'</span>,</span><br><span class="line">               basepath: <span class="string">'src/components/'</span>,</span><br><span class="line">               context: &#123;</span><br><span class="line">                    baseSrc: <span class="string">"."</span></span><br><span class="line">               &#125;</span><br><span class="line"></span><br><span class="line">          &#125;))</span><br><span class="line">          .pipe(revCollector())</span><br><span class="line">          .pipe(gulp.dest(<span class="string">'dist/'</span>));</span><br><span class="line"></span><br><span class="line">     <span class="keyword">return</span> gulp.src([<span class="string">'src/pages/*.html'</span>,<span class="string">'./src/rev/*.json'</span>])</span><br><span class="line">          .pipe(fileInclude(&#123;</span><br><span class="line">               prefix: <span class="string">'@@'</span>,</span><br><span class="line">               basepath: <span class="string">'src/components/'</span>,</span><br><span class="line">               context: &#123;</span><br><span class="line">                    baseSrc: <span class="string">".."</span></span><br><span class="line">               &#125;</span><br><span class="line">          &#125;))</span><br><span class="line">          .pipe(revCollector())</span><br><span class="line">          .pipe(gulp.dest(<span class="string">'dist/pages/'</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">gulp.task(<span class="string">"default"</span>, gulp.series([</span><br><span class="line">     <span class="string">'del'</span>,</span><br><span class="line">     <span class="string">'css'</span>,</span><br><span class="line">     <span class="string">'js'</span>,</span><br><span class="line">     <span class="string">'copy'</span>,</span><br><span class="line">     <span class="string">'html'</span></span><br><span class="line">]));</span><br></pre></td></tr></table></figure>
<h3 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h3><p><a href="https://webpack.wuhaolin.cn/1入门/1-2常见的构建工具及对比.html" target="_blank" rel="noopener">常见构建工具及对比</a></p>

        </div>

        <blockquote class="post-copyright">
    
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2019-12-21T05:19:04.925Z" itemprop="dateUpdated">2019-12-21 13:19:04</time>
</span><br>


        
        关于学习类文章网上已经有非常多，而此处文章都是我在学习过程中整理摘录的笔记，参考文章可以点击文末的参考链接进行查阅
        
    </div>
    
    <footer>
        <a href="https://lafen.gitee.io">
            <img src="/img/avatar.jpg" alt="lafen">
            lafen
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/gulp/">gulp</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/&title=《gulp-自动化构建工具gulp》 — lafen&pic=https://lafen.gitee.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/&title=《gulp-自动化构建工具gulp》 — lafen&source=lafen's personal blog" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《gulp-自动化构建工具gulp》 — lafen&url=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/&via=https://lafen.gitee.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2020/01/10/2020慢一点/2020慢一点/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">2020慢一点</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/2019/12/14/2019年终总结/2019年终总结/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">2019年终总结</h4>
      </a>
    </div>
  
</nav>



    




















</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        打笔巨款？~
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/img/wechat.jpg" alt="打赏二维码">
        </div>
        
        <label class="reward-toggle">
            <input id="rewardToggle" type="checkbox" class="reward-toggle-check" data-wechat="/img/wechat.jpg" data-alipay="/img/alipay.jpg">
            <div class="reward-toggle-ctrol">
                <span class="reward-toggle-item wechat">微信</span>
                <span class="reward-toggle-label"></span>
                <span class="reward-toggle-item alipay">支付宝</span>
            </div>
        </label>
        
    </div>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style="display:none">
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style="display:none">
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
                <span><a href="/atom.xml" target="_blank" class="rss" title="rss"><i class="icon icon-lg icon-rss"></i></a></span>
            
            <span>博客内容遵循 <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">知识共享 署名 - 非商业性 - 相同方式共享 4.0 国际协议</a></span>
        </p>
    </div>
    <div class="bottom">
        <p><span>lafen &copy; 2019 - 2020</span>
            <span>
                
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/&title=《gulp-自动化构建工具gulp》 — lafen&pic=https://lafen.gitee.io/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/&title=《gulp-自动化构建工具gulp》 — lafen&source=lafen's personal blog" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《gulp-自动化构建工具gulp》 — lafen&url=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/&via=https://lafen.gitee.io" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://lafen.gitee.io/2019/12/21/gulp-自动化构建工具gulp/gulp-自动化构建工具gulp/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"scale":1,"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"positon":"right","width":150,"height":300},"mobile":{"show":true,"scale":0.8},"react":{"opacity":0.8,"opacityDefault":0.8,"opacityOnHover":0.6},"log":false});</script></body>
</html>
